<template>
  <div class="dashboard-container">
    <el-row class="user-info" :gutter="10">
      <el-col :span="10" class="user-left">
        <el-card style="height: 280px;">
          <div>
            <p>
              <span style="font-size: 2em; color: rgb(28, 13, 13);"><i class="el-icon-notebook-2">裁判文书</i></span>-
              <span style="font-size: 24px; color: red;">1000册</span><br>
              <span style="font-size: 30px; color: rgb(13, 4, 4);"><i class="el-icon-help">节点</i></span>-
              <span style="font-size: 24px; color: red;">2万左右</span><br>
              <span style="font-size: 28px; color: rgb(58, 20, 20);"><i class="el-icon-sort">联系</i></span>-
              <span style="font-size: 24px; color: red;">1万左右</span></p>
          </div>
          <div style="margin-top: 20px; color: rgb(149, 206, 70);">每日一言：{{ randomText }}</div>
          <div style="margin-top: 10px;"> <el-link type="info" href="/#/user/self">关于我-详情跳转</el-link></div>
        </el-card>
      </el-col>
      <el-col :span="14" class="user-right">
        <LogLineGraph></LogLineGraph>
      </el-col>
    </el-row>
    <div class="kg-graph-info">
      <KGraph id="kg-show" :kg_data="kg_data">知识图谱展示</KGraph>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
import { RandomText } from '@/utils/common'
import { getAllGraph } from '@/api/graph'
import KGraph from '@/components/EchartGraphs/KGraph/index.vue'
import LogLineGraph from '@/components/EchartGraphs/LogLine/index.vue'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name']),
  },
  mounted() {
    getAllGraph().then(resp => {
      if(resp.code === 200) this.$set(this, 'kg_data', resp.data)
      else Message.error(resp.message)
    })
    RandomText().then(resp => {
      this.$set(this, 'randomText', resp.data.text)
    })
  },
  data() {
    return {
      randomText: '',
      kg_data: {
        categories: [{ name: '贾家荣国府' }, { name: '贾家宁国府' }],
        nodes: [
          { category: 1, id: 0, name: '贾政' }, { category: 0, id: 1, name: '赵姨娘' },
          { category: 0, id: 2, name: '贾探春' }, { category: 0, id: 3, name: '贾探春' },
          { category: 0, id: 4, name: '贾探春' }
        ],
        links: [
          { source: 1, target: 2, value: '母亲' }, { source: 0, target: 2, value: '父亲' },
          { source: 2, target: 1, value: '女儿' }, { source: 2, target: 0, value: '女儿' },
          { source: 1, target: 0, value: '女儿' }, { source: 4, target: 0, value: '女儿' }
        ]
      }
    }
  },
  components: { KGraph, LogLineGraph },
  methods: {},
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .el-card {
    height: 280px;
    div {
      margin: 20px;
    }
  }
}
.user-info {
  height: 300px;
  margin-bottom: 10px;
  .user-left {
    height: 100%;
  }
  .user-right {
    height: 100%;
  }
}
.kg-graph-info {
  height: 800px;
  border: 2px solid whitesmoke;
}

</style>
